<ui:component xmlns:ui="http://java.sun.com/jsf/facelets"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:p="http://primefaces.org/ui"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:c="http://java.sun.com/jsp/jstl/core">
    <c:if test="#{!sesion.activa}">
        <!--#{!sesion.comprobar()}-->
    </c:if>
    <c:if test="#{!pCReserva.consultarPermisos().ver}">
        <h:panelGroup layout="block" styleClass="divsinpermisos">
            <p:outputLabel value="No tiene permisos suficientes para ver esta página"/>
        </h:panelGroup>
    </c:if>
    <c:if test="#{pCReserva.consultarPermisos().ver}">
        <ui:param name="nombreparam" value="reserva" />
        <ui:param name="nombreparam2" value="pedido" />
        <ui:param name="duracionparam" value="7000" />
        <ui:param name="efectshowparam" value="fade" />
        <ui:param name="efecthideparam" value="fade" />

        <h:panelGroup layout="block" id="divTabla#{nombreparam}" styleClass="delistar-js">
            <h:form id="formTabla#{nombreparam}">
                <p:growl id="growldel#{nombreparam}" widgetVar="wvgrowldel#{nombreparam}"
                         autoUpdate="false" showDetail="false" life="#{duracionparam}" /> 
                <p:dataTable  var="item"
                              value="#{pCReserva.listado}"
                              rows="10"
                              paginator="true"
                              paginatorTemplate="Página: {CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"  
                              lazy="true"
                              resizableColumns="true"
                              paginatorAlwaysVisible="false"
                              emptyMessage="No hay #{lenguajeBean.devolverStringPlural(nombreparam)} que mostrar."
                              id="tableModel#{nombreparam}"> 
                    <f:facet name="header">  
                        <p:toolbar id="tbx#{nombreparam}" style="margin-top: 4px; margin-bottom: 4px;">
                            <p:toolbarGroup align="left">
                                <p:commandLink value="Para crear una nueva reserva haga click aquí."  actionListener="#{pCReserva.reinicializarTemporal()}"
                                               process="@this"
                                               update=":formdata#{nombreparam}:dlgdata#{nombreparam}"
                                               oncomplete="wvdlgdata#{nombreparam}.show();"
                                               title="Crear #{lenguajeBean.devolverString(nombreparam)}"
                                               rendered="#{pCReserva.consultarPermisos().alta}" />
                            </p:toolbarGroup>
                            <p:toolbarGroup>

                                <h:outputText  styleClass="titulos" value="Listado de #{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}"
                                               rendered="#{sesion.mostrarTituloTabla}"/>   
                                <p:selectCheckboxMenu styleClass="comboSeleccion" value="#{pCReserva.selectedChecksVisible}" label="Elegir columnas" panelStyle="width:220px"
                                                      panelStyleClass="saraza" >  
                                    <f:selectItems value="#{pCReserva.checksVisible}"/>
                                    <p:ajax event="change" listener="#{pCReserva.setearVisibles()}" process="@this"
                                            update=":formTabla#{nombreparam}"/>
                                </p:selectCheckboxMenu> 
                            </p:toolbarGroup>

                        </p:toolbar>

                    </f:facet>

                    <p:column sortBy="#{item.id}"
                              rendered="#{pCReserva.getColVisible('codigo')}" filterBy="#{item.id}">
                        <f:facet name="header"> 
                            <h:outputText value="Id"/>
                        </f:facet>
                        <h:outputText value="#{item.id}"/>
                    </p:column>

                    <p:column sortBy="#{item.cantidad}"
                              rendered="#{pCReserva.getColVisible('cantComensales')}" filterBy="#{item.cantidad}">
                        <f:facet name="header">
                            <h:outputText value="Cant. Comensales"/>
                        </f:facet>
                        <h:outputText value="#{item.cantidad}"/>
                    </p:column>

                    <p:column sortBy="#{item.fechaHora}"
                              rendered="#{pCReserva.getColVisible('fechaHora')}">
                        <f:facet name="header"> 
                            <h:outputText value="Fecha"/>
                        </f:facet>
                        <h:outputText value="#{item.fechaHora.time}">
                            <f:convertDateTime pattern="dd/MM/yyyy"/>
                        </h:outputText>
                    </p:column>

                    <p:column sortBy="#{item.horario}" filterOptions="#{pCReserva.getSelectHorarios()}"
                              rendered="#{pCReserva.getColVisible('horario')}" filterBy="#{item.horario}">
                        <f:facet name="header"> 
                            <h:outputText value="Horario"/>
                        </f:facet>
                        <h:outputText value="#{pCReserva.devolverHorario(item.horario)}" />
                    </p:column>

                    <p:column sortBy="#{item.comentario}"
                              rendered="#{pCReserva.getColVisible('comentario')}" filterBy="#{item.comentario}">
                        <f:facet name="header">
                            <h:outputText value="Comentario"/>
                        </f:facet>
                        <h:outputText value="#{item.comentario}"/>
                    </p:column>

                    <p:column sortBy="#{item.cliente.nombreUsuario}"
                              rendered="#{pCReserva.getColVisible('cliente')}" filterBy="#{item.cliente.nombreUsuario}">
                        <f:facet name="header"> 
                            <h:outputText value="Cliente"/>
                        </f:facet>
                        <h:outputText value="#{item.cliente.nombreUsuario}"/>
                    </p:column>

                    <p:column width="90" exportable="false">
                        <f:facet name="header">
                            <p:commandLink actionListener="#{pCReserva.reinicializarTemporal()}"
                                           process="@this"
                                           update=":formdata#{nombreparam}:dlgdata#{nombreparam}"
                                           oncomplete="wvdlgdata#{nombreparam}.show();"
                                           title="Crear #{lenguajeBean.devolverString(nombreparam)}"
                                           rendered="#{pCReserva.consultarPermisos().alta}" styleClass="agregarIco">
                                <h:graphicImage library="theme/images" name="agregar_.png" alt="Agregar un elemento" height="48" width="48" style="margin-left:20px" />
                            </p:commandLink>
                        </f:facet>
                        <p:commandLink 
                            actionListener="#{pCPedidoInt.setearMesas(item)}"
                            process="@this" title="Crear un #{lenguajeBean.devolverString(nombreparam2)} desde esta #{lenguajeBean.devolverString(nombreparam)}"
                            update=":formdata#{nombreparam2}:dlgdata#{nombreparam}"
                            oncomplete="wvdlgdata#{nombreparam}.show();"
                            style="margin-right: 2px;"
                            disabled="#{!pCPedidoInt.consultarPermisos().alta or pCReserva.setVerFecha(item.fechaHora, item.horario)}">
                            <h:graphicImage library="theme/images" name="new_1.png" alt="Convertir a pedido" />
                        </p:commandLink>
                        <p:commandLink 
                            actionListener="#{pCReserva.establecerTemporal(item, true)}"
                            process="@this" title="Modificar #{lenguajeBean.devolverString(nombreparam)}" 
                            update=":formdata#{nombreparam}:dlgdata#{nombreparam}"
                            oncomplete="wvdlgdata#{nombreparam}.show();"
                            style="margin-right: 2px;"
                            disabled="#{!pCReserva.consultarPermisos().modificacion or pCReserva.setVerFecha(item.fechaHora, item.horario)}">
                            <h:graphicImage library="theme/images" name="editar_ico.png" alt="Modificar un elemento" />
                        </p:commandLink>
                        <p:commandLink 
                            actionListener="#{pCReserva.establecerTemporal(item, false)}"
                            process="@this"
                            style="margin-right: 2px;"
                            oncomplete="wvconfe#{nombreparam}.show();"
                            title="Eliminar #{lenguajeBean.devolverString(nombreparam)}"
                            disabled="#{!pCReserva.consultarPermisos().baja}">
                            <h:graphicImage library="theme/images" name="eliminar_ico.png" alt="Eliminar un elemento"/> 
                        </p:commandLink>

                    </p:column>
                </p:dataTable>

                <p:confirmDialog id="confe#{nombreparam}" widgetVar="wvconfe#{nombreparam}"
                                 header="Confirmar cancelación de #{lenguajeBean.devolverStringPlural(nombreparam)}" 
                                 closeOnEscape="true" closable="true" showEffect="#{efectshowparam}" hideEffect="#{efecthideparam}"
                                 message="¿Seguro que desea cancelar permanentemente el elemento seleccionado?">
                    <p:commandButton value="Si" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" 
                                     actionListener="#{pCReserva.eliminar()}"
                                     update="tableModel#{nombreparam} :formTabla#{nombreparam}:tableModel#{nombreparam}:tbx#{nombreparam} :formTabla#{nombreparam}:growldel#{nombreparam}"
                                     onclick="wvconfe#{nombreparam}.hide();" style="float: right;"/>  
                    <p:commandButton value="No" styleClass="ui-confirmdialog-no" 
                                     icon="ui-icon-close" onclick="wvconfe#{nombreparam}.hide();"
                                     style="float: right;"/>
                </p:confirmDialog>

                <p:panel header="Exportar datos de la tabla" styleClass="exportar-datos">  
                    <h:commandLink>  
                        <p:graphicImage library="theme/images" name="excel.png" alt="Excel" />  
                        <p:dataExporter type="xls" encoding="iso-8859-1" target="tableModel#{nombreparam}" fileName="#{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}" />  
                    </h:commandLink>  

                    <h:commandLink>  
                        <p:graphicImage library="theme/images" name="pdf.png" alt="PDF" />  
                        <p:dataExporter type="pdf" encoding="iso-8859-1" target="tableModel#{nombreparam}" fileName="#{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}"/>  
                    </h:commandLink>  

                    <h:commandLink>  
                        <p:graphicImage library="theme/images" name="csv.png" alt="CSV" />    
                        <p:dataExporter type="csv" target="tableModel#{nombreparam}" fileName="#{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}" />  
                    </h:commandLink>  

                    <h:commandLink>  
                        <p:graphicImage library="theme/images" name="xml.png" alt="XML" />  
                        <p:dataExporter type="xml" target="tableModel#{nombreparam}" fileName="#{lenguajeBean.devolverStringPlural_StartMayus(nombreparam)}" />  
                    </h:commandLink>  
                </p:panel>
            </h:form>

            <h:form id="formdata#{nombreparam}">
                <p:growl id="growldata#{nombreparam}" widgetVar="wvgrowldata#{nombreparam}"
                         autoUpdate="false" showDetail="false" life="#{duracionparam}" /> 
                <p:dialog modal="true" dynamic="true" resizable="false" closable="false" width="550px"
                          widgetVar="wvdlgdata#{nombreparam}" id="dlgdata#{nombreparam}"
                          header="#{pCReserva.devolverTituloDlg()} #{lenguajeBean.devolverString(nombreparam)}"
                          hideEffect="#{efecthideparam}" showEffect="#{efectshowparam}">

                    <h:panelGroup id="paneldialogodata#{nombreparam}" layout="block" 
                                  style="overflow: auto; display: block;">
                        <ui:include src="dialogo_reservas.xhtml"/>
                        <h:panelGroup layout="block" style="overflow: auto; display: inline-block;height:50px; width: 100%">

                            <p:commandButton value="Guardar" actionListener="#{pCReserva.guardar(nombreparam)}"
                                             style="float: left;margin-top: 0px!important;margin-left: 198px" async="false"
                                             update=":formTabla#{nombreparam}:tableModel#{nombreparam} growldata#{nombreparam} paneldialogogriddata#{nombreparam}"
                                             id="btndata#{nombreparam}" widgetVar="wvbtndata#{nombreparam}" rendered="#{!pCReserva.esVer()}"
                                             oncomplete="handle#{nombreparam}datarequest(xhr, status, args);"
                                             styleClass="btn-aceptar">
                                <p:resetInput target="paneldialogogriddata#{nombreparam}"/>
                            </p:commandButton>
                            <p:commandButton value="#{pCReserva.devolverTxtBtnCancelarDlg()}" actionListener="#{pCReserva.reinicializarTemporal()}"
                                             oncomplete="wvdlgdata#{nombreparam}.hide();"
                                             style="margin-top: 15px;" styleClass="btn-cancelar"
                                             process="@this" update="paneldialogogriddata#{nombreparam}">
                                <p:resetInput target="paneldialogogriddata#{nombreparam}"/>
                            </p:commandButton>
                        </h:panelGroup>
                        <p:commandLink value="#{pCReserva.devolverTxtLimpiarFormDlg()}" update="paneldialogogriddata#{nombreparam}"
                                       process="@this" rendered="#{!pCReserva.esVer()}">
                            <p:resetInput target="paneldialogogriddata#{nombreparam}"/>
                        </p:commandLink>
                    </h:panelGroup>
                </p:dialog>
            </h:form>


            <h:form id="formdata#{nombreparam2}">
                <p:growl id="growldata#{nombreparam2}" widgetVar="wvgrowldata#{nombreparam2}"
                         autoUpdate="false" showDetail="false" life="#{duracionparam}" /> 
                <p:dialog modal="true" dynamic="true" resizable="false" closable="false" 
                          width="900px" height="700px !important;"
                          widgetVar="wvdlgdata#{nombreparam}" id="dlgdata#{nombreparam}"
                          header="#{pCPedidoInt.devolverTituloDlg()} #{lenguajeBean.devolverString(nombreparam2)}"
                          hideEffect="#{efecthideparam}" showEffect="#{efectshowparam}" position="right top">

                    <h:panelGroup id="paneldialogodata#{nombreparam2}" layout="block" 
                                  style="overflow: auto; display: block;">
                        <ui:include src="../pedidos/dialogo_pedidos_int.xhtml"/>
                    </h:panelGroup>
                </p:dialog>
            </h:form>

            <h:form id="formcols#{nombreparam}">
                <p:growl id="growl-cols#{nombreparam}" widgetVar="wvgrowl-cols#{nombreparam}"
                         autoUpdate="false" showDetail="false" showSummary="false" life="#{duracionparam}" /> 
                <p:dialog modal="true" dynamic="true" resizable="false" closable="true" width="450px"
                          widgetVar="wvdlgcols#{nombreparam}" id="dlgcols#{nombreparam}"
                          header="Elegir columnas de la tabla" closeOnEscape="true"
                          hideEffect="#{efecthideparam}" showEffect="#{efectshowparam}">
                    <p:message for="val-cols-#{nombreparam}" id="msg-cols-#{nombreparam}"/>
                    <p:selectManyCheckbox value="#{pCReserva.selectedChecksVisible}"  
                                          layout="pageDirection" id="val-cols-#{nombreparam}"
                                          required="true"
                                          requiredMessage="Debe seleccionar al menos una columna para ver.">  
                        <f:selectItems value="#{pCReserva.checksVisible}"/>
                        <p:ajax event="change" update="growl-cols#{nombreparam}"
                                listener="#{pCReserva.setearVisibles()}" process="@this"/>
                    </p:selectManyCheckbox>
                    <p:separator/>
                    <h:panelGroup layout="block" style="overflow: auto; display: block;">
                        <p:commandButton value="Aplicar" oncomplete="wvdlgcols#{nombreparam}.hide();"
                                         update=":formTabla#{nombreparam}:tableModel#{nombreparam}"
                                         style="float: right;" styleClass="btn-aceptar"/>
                        <p:commandButton value="Cancelar" oncomplete="wvdlgcols#{nombreparam}.hide();"
                                         style="float: right; margin-right: 10px;" styleClass="btn-cancelar"/>
                    </h:panelGroup>
                </p:dialog>
            </h:form>

            <p:dialog maximizable="false" minimizable="false" modal="true" id="dlgespera#{nombreparam}"
                      widgetVar="wvdlgespera#{nombreparam}">
                <p:progressBar widgetVar="pbAjax" ajax="true" value="100" labelTemplate="{value}%" styleClass="animated"/>
            </p:dialog>
        </h:panelGroup>
        <h:outputScript>
            function handle#{nombreparam}datarequest(xhr, status, args) {if (args.validationFailed || !args.correcto) {} else {wvdlgdata#{nombreparam}.hide();}}
            function handle#{nombreparam2}datarequest(xhr, status, args) {if (args.validationFailed || !args.correcto) {} else {wvdlgdata#{nombreparam2}.hide();}}
        </h:outputScript>
    </c:if>
</ui:component>
